<template>
  <div>
    <el-card>
      <el-row>
        <span style="font-size: 23px;font-weight: bold">企业详情</span>
        <OperationBar :approveStatus="state.approveStatus"
                      @approve="page.approve"
                      @refresh="page.refresh"
                      pageName="settledEnterpriseForm"/>
      </el-row>
    </el-card>
    <div style="padding: 20px">
      <EntBaseInfo :entId="state.entId" :applyId="route.query.id"/>
      <EnterpriseBroker ref="enterpriseBrokerRef" :entId="state.entId"/>
      <ApproveLog ref="approveLogRef" :applyId="route.query.id"></ApproveLog>
    </div>
    <SelectBroker ref="selectBrokerRef" @submit="page.selectBroker"></SelectBroker>
  </div>
</template>
<script lang="ts" setup>
import {reactive, getCurrentInstance, ref, onMounted, onBeforeMount} from "vue";
import {useRouter, useRoute} from "vue-router";
import {entApplyApproved, queryEntApplyEntity} from "/@/api/entEntry/entApply";

import EntBaseInfo from "/@/views/enterpriseManager/component/entBaseInfo.vue";
import ApproveLog from "/@/views/enterpriseManager/component/approveLog.vue";
import OperationBar from "/@/views/enterpriseManager/component/operationBar.vue";

import SelectBroker from "/@/views/enterpriseManager/component/selectBroker.vue";
import {approveMark} from "/@/views/enterpriseManager/dictionary/constant";
import EnterpriseBroker from "/@/views/enterpriseManager/component/enterpriseBroker.vue"

const {proxy} = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const returnDialogRef = ref<{ openDialog: () => void }>();
const approveLogRef = ref();
const selectBrokerRef = ref();
const enterpriseBrokerRef = ref();
const state = reactive({
  applyId: "",//申请表单id
  entId: "",//企业baseInfo表id
  dialogContent: "",
  approveStatus: "",
  userId: "",
});

const page = {
  init: async () => {
    try {
      if (route.query.id) {
        //为日志条件赋值
        //查询申请表
        const applyRes = await queryEntApplyEntity(route.query.id);
        state.entId = applyRes.data.entId;
        state.approveStatus = applyRes.data.approveStatus;
      }
    } catch (error) {
      console.error('查询过程中出现错误:', error);
      proxy.$wigem.alert.error("查询失败");
    }
  },
  selectBroker: (obj: object) => {
    state.userId = obj.queryObj.userId;
    page.approve(obj);
  },
  approve: async (obj: object) => {
    if (state.approveStatus == '6' && obj.approveMark == approveMark.APPROVED && !state.userId) {
      //选择经纪人
      selectBrokerRef.value.openDialog();
      return;
    }
    let queryParams = {
      id: route.query.id,
      approveStatus: obj.approveMark
    }
    if (obj.queryObj) {
      Object.assign(queryParams, obj.queryObj);
    }
    const approvedRes = await entApplyApproved(queryParams);
    if (approvedRes.success) {
      proxy.$wigem.alert.success(approvedRes.msg);
    } else {
      proxy.$wigem.alert.error(approvedRes.msg);
    }
    page.refresh();
  },
  refresh: () => {
    page.init()
    approveLogRef.value.load();
    enterpriseBrokerRef.value.init();
  }
};
onBeforeMount(() => {
  page.init();
});

onMounted(() => {
});

</script>
<style lang="scss" scoped>

::v-deep(.el-card__body) {
  padding: 20px;
}

.custom-tabs {
  display: flex;
  gap: 10px;

  .custom-tab-btn {
    padding: 10px 28px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
  }

  /* 通过按钮 - 绿色系 (传递成功/积极信号) */
  .custom-tab-btn-pass {
    color: #ffffff;
    background-color: #2ecc71; /* 更柔和的成功绿 */
    border-color: #27ae60;
    transition: all 0.3s;
  }

  .custom-tab-btn-pass:hover {
    background-color: #27ae60; /* 悬停加深 */
  }

  /* 退回按钮 - 蓝色系 (中性操作) */
  .custom-tab-btn-return {
    color: #ffffff;
    background-color: #3498db; /* 友好的蓝色 */
    border-color: #2980b9;
    transition: all 0.3s;
  }

  .custom-tab-btn-return:hover {
    background-color: #2980b9;
  }

  /* 不通过按钮 - 橙红色系 (警示但不过于强烈) */
  .custom-tab-btn-fail {
    color: #ffffff;
    background-color: #e74c3c; /* 比纯红更温和 */
    border-color: #c0392b;
    transition: all 0.3s;
  }

  .custom-tab-btn-fail:hover {
    background-color: #c0392b;
  }

}

.stepClass {
  display: flex;
  justify-content: center
}
</style>
